﻿
<template>
  <div class="user_index" ref="user_index" v-if="user_index_show_data">

    <header ref="header">
      <!-- header_left s-->
      <div class="header_left">
        <img v-bind:src="user_list.image|if_null" class="user_img" v-bind:onerror="default_logo"/>
        <div class="user_id">
            ID:{{user_list.ident|if_null}}
        </div>
        <div class="header_left_bottom_btn">
          <div class="header_bz header_left_btn_base">
            备注
          </div>
          <div class="more header_left_btn_base">
            more
          </div>
        </div>
     </div>
      <!-- header_left e -->
      <!-- header right s -->
      <div class="header_right">
        <div class="header_right_header">
          <div class="count_num">
            积分：{{user_list.integral|if_null}}
          </div>
          <div class="header_right_dh header_right_base" v-if="ad_visit">
            兑换
          </div>
          <div class="header_right_cz header_right_base" v-if="ad_visit">
            充值
          </div>
       </div>
        <!-- header_table s -->
        <div class="header_table">
          <div class="header_table_header">
                {{user_list.school.schoolName|if_null}}
          </div>
          <div class="header_table_middle">
            <div class="header_table_mid_box">{{user_list.penName|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.sex|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.constellation|if_null}}</div>
          </div>
          <div class="header_table_address">
                {{user_list.address|if_null}}
          </div>
        </div>
        <!--header_table e-->
      </div>
      <!-- header right e -->
    </header>
    <div class="cover_container" v-bind:style="{top:divTop}" ref="contaienr" >
      <!-- nav s -->
      <div class="nav" v-bind:class="{show_nav:show_nav_data}" v-if="ad_visit">
        <img v-bind:src="list.list" class="nav_box" v-for="list in img_list"/><!--
        --><img src="../../static/img/user_index/21.png" class="nav_click_btn_close" v-on:click="nav_close" v-show="show_nav_data">
        <img src="../../static/img/user_index/20.png" class="nav_click_btn" v-on:click="nav_more" v-show="!show_nav_data">
      </div>
      <!-- nav e -->
      <!-- card s -->
      <div class="card_wrapper">
        <!-- single card box s -->
            <div class="card_wrapper_box" v-for="user_list in card_list">
                 <div class="card_header">
                   {{user_list.groupName|if_null}} <div class="add_advanture" v-on:click="add_ad(user_list.groupId,user_list.coveId)" v-if="ad_visit">  + </div>
                 </div>
                 <scroll :card_mess="user_list.adventurecards" :user_list="user_list"></scroll>
            </div>
        <!-- single card box e -->
      </div>
      <!-- card e -->
   </div>
    <!-- input_card btn s -->
    <input_card v-show="show_input_card" class="input_card" @show="c_show_nav"></input_card>
    <!-- input_card btn e -->
    <!-- bottom -btn s -->
    <div class="bottom_nav">
      <img src="../../static/img/user_index/more_c.png" class="more_c m_r"  v-on:click="show_classify_f">
      <img src="../../static/img/user_index/bottom_add_c.png" class="midd_m" v-on:click="c_show_input">
      <img src="../../static/img/user_index/top.png" class="more_c m_l" v-on:click="go_top">
    </div>
    <!-- bottom btn e -->
    <!-- classify s -->
    <div class="classify clearfix" v-show="classify_show" v-on:click="show_classify_f">
         <div class="classify_inner clearfix" ref ="classify">
           <div class="classify_box" v-for="list in classify_list" v-onclick="classify">
                {{list.grouping.group|if_null}}
           </div>
         </div>
    </div>
    <FooterMenu></FooterMenu>
    <!-- classify e -->
   </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import "../../static/css/user_index/user_index.css";
  import scroll from "./scroll/nav_gift_scrol.vue";
  import  "../../static/css/Adventure/Adventure.css"
  import input_card from "./card_input.vue"
  import axios from 'axios'
  import filter from "../filter/filter.js"
  import "../../static/css/Adventure/user_index_ad.css"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  import common from "../common/common.js"
  import FooterMenu from "../index/FooterMenu.vue";
  Vue.prototype.$http = axios
  Vue.use(VueScroller);
  Vue.use(MintUI);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: false,
        ad_visit:true,
        other_data:"",
        base_url:''//scroll other_data
      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
      show_classify_f: function () {
        Indicator.open()
        let id = common.get_user_or_ad_id();
        //  / api / user / personalHomepage / getAdventureCardsType
        this.$http.post(this.base_url+'/yizhiweimen/api/user/personalHomepage/getAdventureCardsType',
          qs.stringify(
            {
              'uid': id,
            })
          )
          .catch((thrown) => {
          }).then((e) => {
           Indicator.close();
           this.classify_list = e.data
           this.classify_show = !this.classify_show
          })
      },
      add_ad: function (gid, cid) {
        Indicator.open();
        sessionStorage.setItem("gid",gid)
        sessionStorage.setItem("cid",cid)
        this.$store.dispatch("thom_redirect",
          { name: "/Advanture", router: this.$router });
      },
      nav_more: function () {
        this.show_nav_data = true;
      },
      nav_close: function () {
        this.show_nav_data = false
      },
      c_show_nav: function () {
        this.show_input_card= false
      },
      c_show_input: function () {
        this.show_input_card = true;
      },
      go_top: function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      }
    },
    mounted: function () {
      Indicator.open();
      console.log("footer_______________________")
      sessionStorage.setItem("add_card_list","")
      common.is_app(this)
      /*let id = location.search.split("user_id=")[1];
      this.user_id = id;*/
      if (sessionStorage.getItem("ad_visit") == 'false') {
        this.ad_visit = false
      }

      let id = common.get_user_or_ad_id();
      this.user_id = id;
      this.$http.get('/api/user/getUserById?id=' + id)
        .catch((thrown) => {
      }).then((e) => {
          Indicator.close();
          this.user_list = e.data;
          sessionStorage.setItem("user_list_data", JSON.stringify(e.data));
      })

      ///api/user / adventurecard / getAdventurecard

      this.$http.post(this.base_url+'/yizhiweimen/api/user/personalHomepage/getPageHomeByUser',
        qs.stringify(
          {
            'Uid':id,
          })
        )
        .catch((thrown) => {
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
          if (!e.data) return;
          //this.card_list = e.data
          let e_data_len = e.data.length;
          for (let x = 0; x < e_data_len; x++) {
            for (let y = 0; y < e.data[x].adventurecards.length; y++){
              if (y == 1) {
                e.data[x].adventurecards[y].act = true
              } else if (e.data[x].adventurecards.length == 1) {
                e.data[x].adventurecards[0].act = true
              } else {
                e.data[x].adventurecards[y].act = false
              }
             }
          }
          this.card_list = e.data;
          this.user_index_show_data = true
        })
      //limit_scroll(this.$refs.classify , this.$refs.user_index)
      //nav 图标
      let list = [];
      for (let x = 1; x < 20; x++) {
       var obj = {
         list: "../../static/img/user_index/" + x + ".png",
         click_btn:false
       }
       list.push(obj);
      }
      this.img_list = list;
      //this.divTop = window.getComputedStyle(this.$refs.header).height;
    },
    components: {
      scroll,
      input_card,
      FooterMenu
    }
  }
</script>

<style scoped>
  .cover_native_nav {
    background-color: #87491f;
    width: 100%;
    height: 5.3vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000
  }
  .header_right_header{
      justify-content:space-between;
  }
  .classify_box {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    height: 10.4vw;
    line-height: 10.4vw;
    width: 86vw;
    background-color: #96e54c;
    border-radius: 1vw;
    margin: 3.7vw auto 0;
  }
  .classify_box:nth-last-child(1){
    margin-bottom:3.7vw;
  }
  .classify_inner {
    height:80vh;
    overflow-y:scroll;
    width: 95vw;
    margin: 7.3vw auto;
    background-color: #fff;
    border-radius: 1vw;
  }
  .classify {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index:2000;
    background-color: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
  }
  .box {
    height: 37vw;
  }
  .box_act{
    height:40vw;
  }
  .input_card {
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
  }
  .user_img {
    margin:1.2rem 3.2vw 0.25rem 7vw;
  }
  .header_table{
    margin-top:0.5rem;
  }
  .header_table_address{
    height:2.9rem;
  }
  .header_left_btn_base {
    line-height: 1.2rem;
    height: 1.2rem;
    border-radius: 1vw;
  }
  .header_left_bottom_btn {
    justify-content:center;
  }
  .header_table_address {
    height: 15.4vw;
  }
  .header_table_mid_box {
    height: 7.2vw;
    line-height: 7.2vw;
  }
  .count_num {
    margin-top: 0.6rem;
    width: auto;
    padding-left:1vw;
    padding-right:1vw;
    height: 6.9vw;
    line-height: 6.9vw;
    color: #fff;
    font-size: 4.2vw;
    border-radius: 1.2vw;
    border: 1px solid #fff;
    margin-right: 6.5vw;
  }
  .user_id {
    margin-top: 0.56rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: #fff;
    margin-left: 5.6vw;
  }
  .header_left_btn_base{
    height:6.4vw;
    line-height:6.4vw;
  }
  .header_right_base{
    height:7.4vw;
    line-height:7.4vw;
    margin-top:0.6rem;
  }
  .user_img{
    width:20vw;
    height:20vw;
  }
  .nav_click_btn {
    top: 0.5vw;
    right: 0.8vw;
  }
  .wrapper{
    padding-top:0.5rem;
    background-color:#fff;
  }
  .cover_container .show_nav {
    height: auto;
  }

</style>
